<template>
	<div>
		<div class="nav-bar">
			<van-nav-bar fixed
									 z-index="9"
									 title="购物车"
									 right-text="清空购物车"
									 @click-right="clearCart" />
		</div>
		<div class="cart-list">
			<van-list v-for="good in goodsInCart"
								:key="good.goodId"
								class="cart-list-item">
				<div class="item-img">
					<img :src="good.image"
							 width="100%">
				</div>
				<div class="item-text">
					<div class="item-name">{{ good.name }}</div>
					<div class="cart-control">
						<van-stepper v-model="good.count"
												 min="0"
												 @plus="plusCount(good.goodId)"
												 @minus="minusCount(good.goodId)" />
					</div>
				</div>
				<div class="item-price">
					<div>￥{{ good.price | moneyFilter }}</div>
					<div>× {{ good.count }}</div>
					<div class="total-price">￥{{ good.price * good.count | moneyFilter }}</div>
				</div>
			</van-list>
		</div>
		<div class="total-money">商品总价：￥{{ totalMoney | moneyFilter }}</div>
	</div>
</template>

<script>
import { toMoney } from '@/filter'

export default {
	name: 'Cart',
	data() {
		return {
			isEmpty: false
		}
	},
	methods: {
		clearCart() {
			this.$store.commit('clearCart')
		},
		plusCount(goodId) {
			this.$store.commit('plusCount', goodId)
		},
		minusCount(goodId) {
			this.$store.commit('minusCount', goodId)
		}
	},
	filters: {
		moneyFilter(money) {
			return toMoney(money)
		}
	},
	computed: {
		totalMoney() {
			return this.goodsInCart.reduce(
				(pre, item) => pre + item.price * item.count,
				0
			)
		},
		goodsInCart() {
			return this.$store.state.goodsInCart
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	::v-deep .van-nav-bar__content {
		background-color: #e61382;
		height: 2.2rem;
		line-height: 2.2rem;

		.van-nav-bar__title {
			color: #fff;
			font-size: 1.1rem;
		}

		.van-nav-bar__text,
		.van-icon {
			font-size: 0.9rem;
			color: #fff;
		}
	}
}

.cart-list {
	background-color: #fff;
	padding-top: 2rem;
	padding-right: 5px;
	overflow: scroll;

	.cart-list-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0.5rem;
		font-size: 0.85rem;
		border-bottom: 1px solid #e4e7ed;

		.item-img {
			flex: 6;
		}

		.item-text {
			flex: 14;
			padding-top: 10px;

			.cart-control {
				padding-top: 10px;
				text-align: left;
			}
		}

		.item-price {
			flex: 4;
			text-align: right;
			padding-top: 10px;

			.total-price {
				color: red;
			}
		}
	}
}

.total-money {
	text-align: right;
	background-color: #fff;
	border-bottom: 1px solid #e4e7ed;
	padding: 5px;
	width: 100%;
	font-size: 1.2rem;
	color: #e61382;

	position: fixed;
	bottom: 50px;
	right: 0;
}
</style>
